<template>
  <div class="out">
    <div v-for="(item,index) in newData" :key="index" class="inner" v-show="
                shrinkBoxOpenClose
                    ? item.searchSign
                    : item.searchSign && index < 8
            ">
      <!-- {{newData}} -->
      <!-- input框 -->
      <div class="inp searchOne" v-if="item.type==='input'">
        <div class="font" style>{{item.CN}}</div>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value" placeholder="请输入内容" @clear="clear" @keyup.enter.native="inputFoucs"></el-input>
      </div>
      <!-- select -->
      <div class="inp searchOne" v-else-if="item.type==='select'">

        <div class="font">{{item.CN}}</div>

        <el-select v-if="item.typeGroupCode" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <!-- {{searchOption}} -->
          <el-option v-for="i in searchOption[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
          <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
        </el-select>
        <!-- 归档 -->
        <el-select v-else-if="item.EN == 'guidang'" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in item.option" :key="i.id" :label="i.label" :value="i.value"></el-option>
        </el-select>
        <!-- 搜索框租户信息 -->
        <el-select v-else-if="item.EN == 'sysCompanyCode'" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in getFindByTypeData" :key="i.id" :label="i.name" :value="i.sysCompanyCode"></el-option>
        </el-select>
        <!-- 经销商入货单--生产厂商 -->
        <el-select v-else-if="item.EN == 'user'" clearable class="el_inp" v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in factoryForDealeroption" :key="i.value" :label="i.value" :value="i.value"></el-option>
        </el-select>
        <el-select v-else-if="item.dictTable" class="el_inp" clearable v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>
        <!-- 其他项 -->
        <!-- <div v-else>{{item.option}}</div> -->
        <el-select v-else class="el_inp" clearable v-model="newData[index].value" size="mini" placeholder="请选择" @clear="clear">
          <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>
      </div>
      <!-- date 框-->
      <div class="inp searchOne" clearable v-else-if="item.type==='date'">
        <div class="font">{{item.CN}}</div>
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <el-date-picker class="el_inp" size="mini" v-model="newData[index].value" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="clear"></el-date-picker>
      </div>
      <!-- date 框-->
      <div class="inp searchOne" clearable v-else-if="item.type==='dateDate'">
        <div class="font">{{item.CN}}</div>
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <el-date-picker v-if="item.report" class="el_inp" size="mini" :picker-options='pickerBeginDateBefore' v-model="newData[index].value" type="date" :placeholder="item.defaultDayDate" value-format="yyyy-MM-dd" clearable @clear="clear"></el-date-picker>
        <el-date-picker v-else class="el_inp" size="mini" v-model="newData[index].value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" clearable @clear="clear"></el-date-picker>
      </div>
      <!-- dateMonth 年月 框-->
      <div class="inp searchOne" clearable v-else-if="item.type==='dateMonth'">
        <div class="font">{{item.CN}}</div>
        <!-- {{newData[index].value.moment().format('YYYY-MM-DD')}} -->
        <el-date-picker class="el_inp" size="mini" v-model="newData[index].value" type="month" placeholder="选择年月" value-format="yyyy-MM" clearable @clear="clear"></el-date-picker>
      </div>
      <!-- dateTime 开始结束时间 框-->
      <div class="inp searchOne" clearable v-else-if="item.type==='datetime'">
        <div class="font">{{item.CN}}</div>
        <el-date-picker class="el_inp" size="mini" v-model="newData[index].value" type="daterange" range-separator="-" start-placeholder="开始日期" clearable end-placeholder="结束日期" @clear="clear"></el-date-picker>
      </div>
      <!-- 范围 range   测试-->
      <!-- <div class="inp searchOne" v-if="item.type==='range'">
        <div class="font" style>{{item.CN}}</div>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[0]" placeholder="请输入" @clear='clear'></el-input>
        <span>-</span>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[1]" placeholder="请输入" @clear='clear'></el-input>
      </div>-->
      <!-- <div class="inp searchOne" v-if="item.type==='range'">
        <div class="font" style>{{item.CN}}</div>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[0]" placeholder="请输入" @clear='clear'></el-input>
        <span>-</span>
        <el-input clearable class="el_inp" size="mini" v-model="newData[index].value[1]" placeholder="请输入" @clear='clear'></el-input>
      </div>-->
    </div>
  </div>
</template>
<script>
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  name: 'searchComponents',
  props: [
    'searchData',
    'optionsZi',
    'searchOptionTable',
    'getFindByTypeData',
    'factoryForDealeroption',
    'shrinkBoxOpenClose',
  ],
  data() {
    return {
      //深拷贝的searchData
      dataModel: '',
      newData: [],
      // 组件类型
      modelType: 'search',
      // 请求到的option
      // ç:[],
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime()
        },
      },
    }
  },
  created() {
    this.newData = JSON.parse(JSON.stringify(this.searchData)) //深拷贝
  },
  mounted() {
    this.getOptionsZi()
    this.$bus.on('goSearchComponents', (BOO) => {
      let emData = this.newData
      emData.forEach((val) => {
        val.value = ''
      })
    })
  },
  watch: {
    searchData: {
      handler(newValue, oldValue) {
        this.newData = JSON.parse(JSON.stringify(newValue)) //深拷贝
        this.newData = newValue
        this.$emit('searchCallBack', this.newData)
      },
      deep: true,
    },
    newData: {
      handler(newValue, oldValue) {
        this.newData = newValue
        this.$emit('searchCallBack', newValue)
      },
      deep: true,
    },
    optionsZi(newVal) {
      this.searchOption = newVal
      //      console.log(newVal,111)
    },
    searchOptionTable(newVal) {
      console.log(newVal, 'kuabiaoceshi')

      this.searchOptions = newVal
    },
  },
  // components:{
  //   dictionaries
  // },
  methods: {
    inputFoucs() {
      console.log(this.$parent, 357)
      console.log(this.$parent.suoS, 357)
      console.log(this.$parent.pagesize, 357)
      console.log(this.$parent.currentPage, 357)
      console.log(this.$parent.forData, 357)
      this.$parent.forData(
        this.$parent.currentPage,
        this.$parent.pagesize,
        this.$parent.suoS
      )
    },
    // 初始化字典
    getOptionsZi() {
      this.searchOption = this.optionsZi
      this.searchOptions = this.searchOptionTable
    },
    clear() {
      // console.log('清空');
      this.$emit('clearSearch', '清空')
    },
    // 字典回调
    // dictionariesCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOption = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
    // 跨表字典回调
    // dictionariesTableCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOptionTable = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
  },
}
</script>
<style lang="scss" scoped>
.out {
  display: flex;
  // flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  // padding: 0px 40px;
  padding: 22px 30px 22px !important;
  .inner {
    // flex: 1;
    // width:80px;
    width: 25%;
    // display: flex;
    padding: 0px 15px;
    .searchOne {
      .font {
        // width: 80px;
        width: 110.79px;
        // width: 100.79px;
        text-align: right;
        height: 34px;
        line-height: 34px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 12px;
        font-size: 16px;
        // background: forestgreen;
      }
    }

    .inp {
      flex: 100;
      display: flex;
      margin: 7.5px 0px;
      height: 34px;
      line-height: 34px;
      .el_inp {
        width: 84%;
        // width: 280px;
        height: 34px;
        /deep/.el-input__inner {
          height: 34px;
        }
      }
    }
  }
  .innerbtn {
    width: 25%;
    padding: 7.5px 20px;
  }
}
</style>
